<template>
    <section>
      <div class="recommend-title">周末去哪儿</div>
      <ul>
        <li class="item" v-for="item in weekendList" :key="item.id">
          <div class="item-img-wrapper">
            <img class="item-img" :src="item.imgUrl" alt="item.title">
          </div>
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
          </div>
        </li>
      </ul>
    </section>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    weekendList: Array
  },
  data () {
    return {
      // weekendList: [
      //   {id: '0001', imgurl: 'http://img1.qunarzz.com/sight/source/1505/a2/78e4dbcfd45a6d.jpg_r_640x214_7a62b06a.jpg', title: '成都必游TOP10', desc: '成都的标志，也是现代人对老成都的记忆'},
      //   {id: '0002', imgurl: 'http://img1.qunarzz.com/sight/source/1507/a0/7087c85d439e4.jpg_r_640x214_4cd56a30.jpg', title: '远离烧烤模式', desc: '周末还在搓麻将？快出门赏美景'},
      //   {id: '0003', imgurl: 'http://img1.qunarzz.com/sight/source/1505/63/0ffcb5c329a19c.jpg_r_640x214_93fd1e5a.jpg', title: '慢游成都最美古镇', desc: '撷取一份悠闲，寻觅散落在时光里的幸福'},
      //   {id: '0004', imgurl: 'http://img1.qunarzz.com/sight/source/1505/e2/2a63e38b84bc8e.jpg_r_640x214_679f0d37.jpg', title: '玩转主题乐园', desc: '乐园，与青春作伴'},
      //   {id: '0005', imgurl: 'http://img1.qunarzz.com/sight/source/1505/b8/e6206794272459.jpg_r_640x214_a002ded9.jpg', title: '郊野户外深呼吸', desc: '做个久违的深呼吸，来一场清肺之旅'}
      // ]
    }
  }
}
</script>

<style lang="less" scoped>
  @import '~styles/varibles.less';
  @import '~styles/mixins.less';
  .recommend-title {
    line-height: .8rem;
    background: #eee;
    text-indent: .2rem;
  }
  .item-img-wrapper {
    height: 0;
    overflow: hidden;
    padding-bottom: 37.09%;
    .item-img {
      width: 100%;
    }
  }
  .item-info {
    padding: .2rem;
    .item-title {
      line-height: .54rem;
      font-size: .32rem;
      .ellipsis();
    }
    .item-desc {
      line-height: .4rem;
      color: #616161;
      .ellipsis();
    }
  }

</style>
